<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>新能源多能互补项目</title>
    <title><%- VITE_APP_content %></title>
    <!-- <script>
        /** 加载百度统计 */
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement('script');
            hm.src = 'https://hm.baidu.com/hm.js?45a68a5c66a8cda4281052ce7bf0d3b7';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script> -->
</head>
<!-- <script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'c66e09a018d8b163e7cf7b69eb2c84cc',
    }
</script> -->

<!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=42c6dd3f5c908dacc63c021f6f722dea&plugin=AMap.Geocoder">
</script> -->
<style>
    body {
        margin: 0;
        background-color: white;
    }

    body>.html-loading-el {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        pointer-events: none;
    }

    /* 设置位置 */
    body>.html-loading-el .loading {
        /* 高度 */
        height: fit-content;
        /* 弹性布局 */
        display: flex;
        /* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
        align-items: center;
        height: 100px;
        width: fit-content;
    }

    /* 小竖条 */
    body>.html-loading-el .item {
        height: 100%;
        width: 7px;
        background: rgba(0, 128, 255, 0.503);
        /* 加margin，使竖条之间有空隙 */
        margin: 0px 10px;
        /* 圆角 */
        border-radius: 999px;
        /* 动画：名称、时间、循环 */
        animation: loading 1s infinite;
    }

    /* 设置动画 */
    @keyframes loading {
        0% {
            height: 0px;
        }

        50% {
            height: 100%;
        }

        100% {
            height: 0px;
        }
    }

    /* 为每一个竖条设置延时 */
    body>.html-loading-el .item:nth-child(2) {
        animation-delay: 0.1s;
    }

    body>.html-loading-el .item:nth-child(3) {
        animation-delay: 0.2s;
    }

    body>.html-loading-el .item:nth-child(4) {
        animation-delay: 0.3s;
    }

    body>.html-loading-el .item:nth-child(5) {
        animation-delay: 0.4s;
    }

    body>.html-loading-el .item:nth-child(6) {
        animation-delay: 0.5s;
    }

    body>.html-loading-el .item:nth-child(7) {
        animation-delay: 0.6s;
    }

    body>.html-loading-el .item:nth-child(8) {
        animation-delay: 0.7s;
    }
</style>

<body>
    <div id="app"></div>
    <div id="html-loading-el" class="html-loading-el">
        <div class="loading">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
</body>

</html>